@import "../common/functions.scss";
@import "../common/_variables.scss";
$fs: pxToRem(28px) pxToRem(24px) pxToRem(26px) pxToRem(30px);
%fb{font-weight: bold;}
.order_detail{
	.order_line{
		margin-top: pxToRem(20px);
		border-top: $border;
		border-bottom: $border;
		background-color: $_fff;
		h2{
			background:#F5F5F5;
			font-size: nth($fs,1);
			height: pxToRem(80px);
			line-height: pxToRem(80px);
			border-bottom: $border;
			padding-left: pxToRem(30px);
		}
		.good_detail{
			padding: pxToRem(20px) pxToRem(30px) 0;
			overflow: hidden;
		}
		.goodImg{
			border-bottom: $border;
			padding-bottom: pxToRem(18px);
			overflow: hidden;
		}
//滑动
		.view{
			width: 5.5rem;
			height: pxToRem(161px);
			overflow-x: auto;
			overflow-y: hidden;
		}
		.scrollView{
			
		}

		img{
			border: $border;
			margin-bottom: pxToRem(4px);
			width: pxToRem(128px);
		}
		.img_block{
			padding-right: pxToRem(10px);
			font-size: 0;
			p{
				font-size: nth($fs,2);
				text-align: center;
				color: $_999;
			}
		}
		.jd{
			position: relative;
			overflow: hidden;
			&:after{
				content: "";
				position: absolute;
				width: pxToRem(34px);
				height: pxToRem(31px);
				background: url(../../img/jd.jpg) no-repeat;
				background-size: pxToRem(34px) pxToRem(31px);
				top: 1px;
				left: 1px;
			}
		}
		.totalGood{
			position: absolute;
			font-size: nth($fs,1);
			top: 52%;
			right: pxToRem(45px);
			@include translate(0,-50%);
		}
		.goodInfo+.goodInfo{
			border-top: $border;
		}
		label{
			display: block;
			font-size: nth($fs,3);
			color: $_666;
			float: left;
		}
		.goodInfo{
			padding: pxToRem(30px) pxToRem(40px) pxToRem(30px) pxToRem(50px);
			p{
				font-size: nth($fs,3);
				float: right;
			}
		}
		.total:nth-child(1){
			margin-left:  pxToRem(30px);
		}
		.dot:after{
			right: 0px;
		}
	}
//发票、商品总额
	.bill,
	.totalInfo{
		background: $_fff;
		border-top: $border;
		border-bottom: $border;
		margin-top: pxToRem(20px);
	}
	.totalInfo{
		padding: pxToRem(23px);
		label{
			font-size: nth($fs,3);
			float: left;
		}
		p{
			font-size: nth($fs,3);
			float: right;
		}
		.totalLine+.totalLine{
			margin-top: pxToRem(24px);
		}
	}
	.bill{
		padding: 0 pxToRem(30px) pxToRem(15px) pxToRem(30px);
		.noNeed,
		.need{
			font-size: nth($fs,3);
			position: relative;
			padding: pxToRem(20px) 0 pxToRem(20px) pxToRem(50px);
			position: relative;
		}
		.noNeed{
			border-bottom: $border;
		}
		.icon-select{
			position: absolute;
			width: pxToRem(40px);
			height: pxToRem(40px);
			border-radius: 50%;
			border: 2px solid $_c8c8cc;
			background-color: $_fff;
			margin-right: pxToRem(15px);
			left: pxToRem(-5px);
			top: 50%;
			transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
		}
		.active{
			background-color: $_03a9f4;
			border: 2px solid $_03a9f4;
			&:after{
				content: "";
				position: absolute;
				@include tick(pxToRem(18px),pxToRem(28px),pxToRem(3px),$_fff,220deg,0,0);
				right: pxToRem(5px);
			}
		}
		h3{
			font-size: nth($fs,3);
			margin-top: pxToRem(7px);
		}
		.select{
			margin-top: pxToRem(30px);
			margin-bottom: pxToRem(25px);
			font-size: 0;
		}
		button{
			background-color: $_fff;
			display: inline-block;
			margin-right: pxToRem(16px);
			width: pxToRem(200px);
			height: pxToRem(70px);
			font-size: nth($fs,4);
			border: 1px solid $_666;
			border-radius: .1rem;
		}
		.focus{
			color: $_03a9f4;
			border: 1px solid $_03a9f4;
		}
		.needInput{
			font-size: 0;
		}
		input{
			border: 1px solid $_ccc;
			color: $_999;
			font-size: nth($fs,4);
			margin-bottom: pxToRem(15px);
			padding: pxToRem(17px);
			width: 100%;
			display: none;
		}
		.needInfo{
			display: none;
		}
		.needInfo p{
			font-size: nth($fs,4);
			margin-bottom: pxToRem(18px);
		}
		.dot:after{
			@include tick(pxToRem(24px),pxToRem(24px),pxToRem(5px),$_999,225deg,0,50%);
		}
	}
}